<template>
  <div class="white-module teacher-evaluation-module">
    <div style="height: 1px"></div>
    <div class="evaluate">
      <div class="text-name">
        <div class="text">{{ classRoom.classRoomEntity ? classRoom.classRoomEntity.title : '' }}</div>
        <div class="img">
          <img src="@/assets/common/active_learn.png" />
          {{ classRoom.classRoomEntity ? classRoom.classRoomEntity.title : '' }}
        </div>
      </div>
    </div>

    <div class="student">
      <div class="num-total">
        <div class="num">学生：{{ classRoom.userInfo.account }}</div>
        <div class="total">状态：{{topicArray.status===0?'草稿':'已发布'}}</div>
      </div>
      <div  v-if="editType===2" class="excel" @click="addQuertion(1)">填空</div>
      <div v-if="editType===2" class="excel" @click="addQuertion(2)">选择</div>
      <div v-if="editType===2" class="excel" @click="addQuertion(3)">多选</div>
      <div v-if="editType===2" class="excel" @click="addQuertion(4)">评分</div>
      <div v-if="editType===2" class="excel" @click="addQuertion(5)">简答</div>
      <div v-if="editType===2" class="excel" @click="saveQuestion(0)">暂存</div>
      <div v-if="editType===2" class="excel" @click="saveQuestion(1)">发布</div>
      <div v-if="editType===1 && userType==3" class="excel" @click="editQuestion">编辑题目</div>
      <div class="excel" @click="downFile" v-if="editType===1 && userType==3">导出全部</div>
    </div>
    <div class="grading global-scroll">
      <div  class="item" v-for="(item, index) in topicArray.questionList" :key="index">
        <el-row  style="margin-bottom: 10px;">
          <el-col :span="0.5">
            <div class="title row" rows="3" style="display: inline">
              <span>{{ index + 1 }}.</span>
            </div></el-col>
          <el-col :span="16"  >
            <div class="title" v-if="editType===1" > {{ item.title }}</div>
            <el-input type="textarea" v-if="editType===2"
                      width="420px"
              placeholder="问题内容"
              v-model="item.title"
            ></el-input
          ></el-col>
          <el-col :span="2" style="margin-left: 10px;padding: 2px" class="bg-purple-ligh">
            <span style="border:1px solid red;font-size: 8px">
              {{ item.type===1?'填空题': item.type===2?'单选题':item.type===3?'多选题':item.type===4?'评分题':'简答题'}}
            </span>
            <div>
              <el-button v-if="editType===2" size="small" @click="deleteQuestion(index)">删除</el-button>

            </div>
          </el-col>
        </el-row>

        <div class="answer-module">
          <div v-if="item.type == 1" class="input">
            <el-input type="text" placeholder="请填写答案" v-model="item.answer"></el-input>
          </div>
          <div v-if="item.type == 2" class="radio">
            <el-radio-group class="" v-model="item.answer">
              <div>
                <div v-for="(e, num) in item.options" :key="num" style="margin-top: 5px">
                  <el-radio :label="e.id">
                    <el-input v-if="editType===2" v-model="e.option" :label="num" :placeholder="'选项'+(num+1)"></el-input>
                    <span v-if="editType===1">{{e.option}}</span>

                  </el-radio>
                  <el-button v-if="item.options.length===num+1 && editType===2" size="small" @click="delQuertionItem(item.sort,e.id)" type="success" >
                    ➖
                  </el-button>
                  <el-button v-if="item.options.length===num+1 && editType===2" size="small" @click="addQuertionItem(item.sort)" type="success" >
                    ➕
                  </el-button>
                </div>
              </div>
            </el-radio-group>
          </div>
          <div v-if="item.type == 3" class="checkbox">
            <el-checkbox-group v-model="item.answers">
              <div>
                <div v-for="(e, num) in item.options" :key="num">
                  <el-row>
                    <el-col :span="16" style="display: inline">
                      <el-checkbox :label="e.option" :key="e.option">
                        <el-input v-if="editType===2" v-model="e.option" :label="num" :placeholder="'选项'+(num+1)"></el-input>
                        <span v-if="editType===1">{{e.option}}</span>

                      </el-checkbox>
                    <el-button style="margin-left: 10px" v-if="item.options.length===num+1 && editType===2"  size="small" @click="delQuertionItem(item.sort,e.id)" type="success" >
                      ➖
                    </el-button>
                    <el-button v-if="item.options.length===num+1 && editType===2"  size="small" @click="addQuertionItem(item.sort)" type="success" >
                      ➕
                    </el-button>
                    </el-col>

                  </el-row>

                </div>
              </div>
            </el-checkbox-group>
          </div>
          <div v-if="item.type == 4" class="five">

            <el-rate
                v-if="editType===1"
                v-model="item.answer"
                :colors="'#01a0e9'">
            </el-rate>

          </div>
          <div v-if="item.type == 5" class="textarea">
            <el-input type="text" placeholder="请填写答案" v-model="item.answer"></el-input>
          </div>
        </div>
      </div>
      <el-row>
        <el-button v-if="editType==1 && userType ==4 " @click="submitQuetion" > 提交1 </el-button>
      </el-row>

    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, Ref, nextTick, defineProps,defineExpose, watch} from "vue";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import {getCache, getToken} from "@/utils/cache";

/**
 * 接收父组件传来的值
 */
const props = defineProps({
  classRoom: {},hourId:Number,classRoomId:Number});
watch(
    () =>props.hourId,
    //监听路由
    (val) => {
      console.log("----======")
      queryQuestion();
    }
);
/**
 * 1查看，2是编辑queryQuestion
 * */
const editType=ref(1);
let userType =ref(4);
//取当前用户的登录类型
userType = getCache("userType", { isSessionStorage: true }, {});
/**
 * 课堂id
 * */
//const roomClassId:number=0;
const topicArray:any = ref({
  title: "评价一",
  status:0,
  creator: "zhangsan",
  create_at: "2022-04-08 10:00:00",
  updator: "zhangsan",
  update_at: "2022-04-08 10:00:00",
  questionList: [
  ],
});

const addQuertion = (type: number) => {
  let index = topicArray.value.questionList.length+1;
  if (type === 1) {
      topicArray.value.questionList.push({
        title: "",
        type: 1,
        sort: index,
        answer: "",
        creator: "",
        create_at: "",
        updator: "",
        update_at: "",
      });
    }
    if (type === 2) {
        topicArray.value.questionList.push({
                                          title: "",
                                          type: 2,
                                          options: [
                                            {
                                              id: 1,
                                              option: "",
                                            },
                                            {
                                              id: 2,
                                              option: "",
                                            },
                                          ],
                                          sort: index,
                                          answer: 1,
                                          creator: "",
                                          create_at: "",
                                          updator: "",
                                          update_at: "",
                                        });
      }
      if (type === 3) {
          topicArray.value.questionList.push({
                                            title: "",
                                            type: 3,
                                            options: [
                                              {
                                                id: 1,
                                                option: "",
                                              },
                                              {
                                                id: 2,
                                                option: "",
                                              },
                                            ],
                                            sort: index,
                                            answer: "",
                                          answerS: "",
                                            creator: "",
                                            create_at: "",
                                            updator: "",
                                            update_at: "",
                                          });
        }
        if (type === 4) {
            topicArray.value.questionList.push({
                                              title: "",
                                              type: 4,
                                              options: [
                                                {
                                                  id: 1,
                                                  score: 1,
                                                  option: "",
                                                },
                                                {
                                                  id: 2,
                                                  score: 2,
                                                  option: "",
                                                },
                                              ],
                                              sort: index,
                                              answer: "",
                                              creator: "",
                                              create_at: "",
                                              updator: "",
                                              update_at: "",
                                            });
          }
  if(type===5){
  topicArray.value.questionList.push({
      title: "",
      type: 5,
      sort: index,
      answer: "",
      creator: "",
      create_at: "",
      updator: "",
      update_at: "",
    });
  }

};

/**
 * 添加选项
 * */
const addQuertionItem = (questionId: number) => {

    for (let i in topicArray.value.questionList) {
        if(topicArray.value.questionList[i].sort===questionId){
          let optionIndex = topicArray.value.questionList[i].options.length+1;
          topicArray.value.questionList[i].options.push({option:""});
        }

    }
};
/**
 * 删除选项
 * */
const delQuertionItem = (questionId: number,id:number) => {
  for (let i in topicArray.value.questionList) {
    if(topicArray.value.questionList[i].sort===questionId){
      let optionIndex = topicArray.value.questionList[i].options.length+1;
      topicArray.value.questionList[i].options = topicArray.value.questionList[i].options.filter((item: { id: number; }
      )          => {
        return item.id !== id;
      });
      topicArray.value.questionList[i].options.forEach(function(v:any,i2:number,arr:any){
        v.id = i2+1;
      });
    }
  }
};

/**
 *保存问题
 */
const saveQuestion = (status:number)=>{
  topicArray.value.hourId=props.hourId;
  topicArray.value.classRoomId=props.classRoomId;
  topicArray.value.status = status;
  baseService
      .post("/fii/front/question/saveQuestion", topicArray.value)
      .then((res) => {
            if (res.code === 0) {
              ElMessage.success("保存成功！");
              editType.value=1;
            } else {
              ElMessage.error("保存失败");
            }
          }
      );
}
/**
 * 编辑题目
 * */
const editQuestion = () =>{
  editType.value=2;
}
/**
 * 删除题目
 * */
const deleteQuestion = (index:number) =>{
  let  deleteNode:any = topicArray.value.questionList[index];
  topicArray.value.questionList = topicArray.value.questionList.filter((item:any,index:number) => item !== deleteNode);
}

/**
 *查询问题
 */
const queryQuestion = ()=>{

  baseService
      .get("/fii/front/question/queryQuestion?classRoomId="+props.classRoomId+"&hourId="+props.hourId, {
      })
      .then((res) => {
            if (res.code === 0) {
              topicArray.value = res.data;
              topicArray.value.status = res.data.status;
              topicArray.value.questionList =res.data.questionList;
            } else {
            }
          }
      );

}

/**
 *答题
 */
const submitQuetion = ()=>{
  topicArray.value.hourId=props.hourId;
  topicArray.value.classRoomId=props.classRoomId;
  baseService
      .post("/fii/front/question/submitQuestion", topicArray.value)
      .then((res) => {
            if (res.code === 0) {
              ElMessage.success("保存成功！");

            } else {
              ElMessage.error("已提交，不可重复提交");
            }
          }
      );
}
const downFile = () =>{
  let url ="/fii/front/question/down?tokenid="+getToken();
  //const headers={tokenId:getToken()};
  baseService.download(url,{classRoomId:props.classRoomId})
}
// 将子组件的方法和属性暴露出去
defineExpose({
  queryQuestion
});


</script>
<style scoped lang="scss">
.teacher-evaluation-module {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 0px;
}
.grading {
  flex: auto;
  overflow-y: auto;
  margin-top: 12px;
  padding: 12px 24px 8px;
  .item {
    margin-bottom: 24px;
    .title {
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 16px;
    }
    .input,
    .radio,
    .checkbox,
    .five,
    .textarea {
      padding-left: 20px;
    }
    .five {
      display: flex;
      align-items: center;
      img {
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
    }
    .radio,
    .checkbox {
      margin-top: -6px;
    }
  }
}
.student {
  margin: 26px 24px 0px;
  flex-shrink: 0;
  border-bottom: 1px solid #eeeeee;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  justify-content: space-between;
  .num-total {
    text-align: left;
    .num {
      font-weight: bold;
      font-size: 18px;
    }
    .total {
      font-size: 12px;
      display: flex;
      align-items: center;
      margin-top: 8px;
      color: #4f5a70;
    }
  }
  .excel {
    cursor: pointer;
    width: 68px;
    line-height: 28px;
    background: #00a0e9;
    border-radius: 6px;
    font-size: 12px;
    float:right;
    color: #fff;
    text-align: center;
  }
}
.evaluate {
  margin: 23px 24px 0px;
  height: 80px;
  flex-shrink: 0;
  background: #eff6ff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0px 16px;
  justify-content: space-between;
  .text-name {
    text-align: left;
    .text {
      font-weight: bold;
      font-size: 18px;
    }
    .img {
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-top: 8px;
      img {
        width: 18px;
        margin-right: 5px;
        height: 18px;
        margin-top: 2px;
      }
    }
  }
  .excel {
    cursor: pointer;
    width: 104px;
    line-height: 38px;
    background: #00a0e9;
    border-radius: 6px;
    font-size: 16px;
    color: #fff;
    text-align: center;
  }
}
</style>
